﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Derrick.Web.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Web sockets test</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-min.js" type="text/javascript"></script>
    <script type="text/javascript">

        // Web Socket API: http://dev.w3.org/html5/websockets/
        // 
        // This software is distributed under the terms of the MIT License:
        // 
        //  Copyright (c) 2010 Oliver Mezquita Prieto.
        //  
        //  Permission is hereby granted, free of charge, to any person obtaining a copy
        //  of this software and associated documentation files (the "Software"), to deal
        //  in the Software without restriction, including without limitation the rights
        //  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
        //  copies of the Software, and to permit persons to whom the Software is
        //  furnished to do so, subject to the following conditions:
        //  
        //  The above copyright notice and this permission notice shall be included in
        //  all copies or substantial portions of the Software.
        //  
        //  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
        //  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
        //  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
        //  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
        //  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
        //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
        //  THE SOFTWARE. 

        var ws;
        var SocketCreated = false;

        function ToggleConnectionClicked() {
            if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) {  // Web Socket connecting or connected
                ws.close();
            } else {
                Log("Trying to connect to the server ...");
                try {
                    ws = new WebSocket("ws://" + document.getElementById("Connection").value);
                    SocketCreated = true;
                } catch (ex) {
                    Log(ex, "ERROR");
                    return;
                }

                document.getElementById("ToggleConnection").innerHTML = "Disconnect";
                ws.onopen = WSonOpen;
                ws.onmessage = WSonMessage;
                ws.onclose = WSonClose;
                ws.onerror = WSonError;
            }
        };


        function WSonOpen() {
            Log("Connection established.", "OK");
            $("#SendDataContainer").show("slow");
        };


        function WSonMessage(event) {
            Log("Message received: \"" + event.data + "\"");            
        };


        function WSonClose() {
            Log("Connection closed.", "ERROR");
            document.getElementById("ToggleConnection").innerHTML = "Connect";
            $("#SendDataContainer").hide("slow");
        };


        function WSonError() {
            Log("Error in Web Socket.", "ERROR");
        };


        function SendDataClicked() {
            if (document.getElementById("DataToSend").value != "") {
                ws.send(document.getElementById("DataToSend").value);
                document.getElementById("DataToSend").value = "";
            }
        };


        function Log(Text, MessageType) {
            if (MessageType == "OK") Text = "<span style='color: green;'>" + Text + "</span>";
            if (MessageType == "ERROR") Text = "<span style='color: red;'>" + Text + "</span>";
            document.getElementById("LogContainer").innerHTML = document.getElementById("LogContainer").innerHTML + Text + "<br />";
            var LogContainer = document.getElementById("LogContainer");
            LogContainer.scrollTop = LogContainer.scrollHeight;
        };


        $(document).ready(function () {
            $("#SendDataContainer").hide();
            var WebSocketsExist = true;
            try {
                var dummy = new WebSocket("ws://localhost:8282/test");
            } catch (ex) {
                WebSocketsExist = false;
            }

            if (WebSocketsExist) {
                Log("Your browser supports Web Sockets. You can go ahead and connect to the server!", "OK");
                document.getElementById("Connection").value = "localhost:8181/test";
            } else {
                Log("Your browser does not support Web Sockets. Try to get a different one before trying out this demonstration.", "ERROR");
                document.getElementById("ToggleConnection").disabled = true;
            }            
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Web Sockets test</h1>
        <br />
        <div>
            When pressed, this button will initiate a connection with the web server through web sockets. 
            The server will then send data to the client every 10 seconds.
        </div>
        Connection: <input type="text" id="Connection" />
        <button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked();'>Connect</button>
        <br />
        <br />
        <div id='SendDataContainer'>
        <input type="text" id="DataToSend" size="80" />
        <button id='SendData' type="button" onclick='SendDataClicked();'>Send</button>
        </div>
        <br />
        <div id='LogContainer' class='container'></div>
        <br />
    </form>
</body>
</html>

